<template>
   <el-dialog :title="title+'菜单'"
             :visible.sync="isShow"
             width="45%"
             @close="cancel">
    <el-form ref="formRef" :rules="formRules" :model="formData" class="info-form"  label-width="110px">
      <el-row v-if="formData.pid">
        <el-col :span="24">
          <el-form-item label="菜单类型"
                        prop="type">
            <el-radio-group size="small" v-model="formData.type">
              <el-radio-button :label="1">菜单</el-radio-button>
              <el-radio-button :label="2">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="formData.type == 1">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称"
                          prop="title">
              <el-input size="medium" v-model="formData.title"
                        placeholder="请输入菜单名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单地址"
                          prop="path">
              <el-input size="medium" v-model="formData.path"
                        placeholder="路由地址，以/开头"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="组件地址"
                          key="1"
                          v-if="formData.type == 1"
                          prop="component">
              <el-input size="medium" v-model="formData.component"
                        placeholder="组件存储路径地址，不以/开头"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识"
                          prop="mark">
              <el-input size="medium" v-model="formData.mark"
                        placeholder="格式：controller@action"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单图标"
                          prop="icon">
              <el-popover placement="bottom-start"
                          width="460"
                          trigger="click"
                          @show="$refs['iconSelect'].reset()">
                <IconSelect ref="iconSelect"
                            @selected="formData.icon=$event" />
                <el-input size="medium" slot="reference"
                          v-model="formData.icon"
                          placeholder="点击选择图标"
                          readonly>
                  <svg-icon v-if="formData.icon"
                            slot="prefix"
                            :icon-class="formData.icon"
                            class="el-input__icon"
                            style="height: 32px;width: 16px;" />
                  <i v-else
                     slot="prefix"
                     class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重定向"
                          prop="redirect">
              <el-input size="medium" v-model="formData.redirect"
                        placeholder="请输入Redirect"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否外链"
                          prop="is_link">
              <el-radio-group size="small"
                              v-model="formData.is_link">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序"
                          prop="sort">
              <el-input-number size="medium"
                               v-model="formData.sort"
                               :min="1"
                               label="排序大小"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否显示"
                          prop="is_show">
              <el-radio-group size="small"
                              v-model="formData.is_show">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存"
                          prop="is_cache">
              <el-radio-group size="small"
                              v-model="formData.is_cache">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <el-row>
          <el-col :span="12">
            <el-form-item label="按钮名称"
                          prop="title">
              <el-input size="medium" v-model="formData.title"
                        placeholder="请输入按钮名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权限标识"
                          prop="mark">
              <el-input size="medium" v-model="formData.mark"
                        placeholder="格式：controller@action">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序"
                          prop="sort">
              <el-input-number size="medium"
                               v-model="formData.sort"
                               :min="1"
                               label="排序大小"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

    </el-form>
    <div slot='footer'>
      <el-button @click="cancel"
                 size="small">取消</el-button>
      <el-button type="primary"
                 size="small"
                 @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addData, updateData, getInfoData } from '@/api/system/menu'
import { mapActions } from 'vuex'
const formRules = {
  type: [{ required: true, message: '菜单类型必须！', trigger: 'blur' }],
  title: [
    { required: true, message: '名称必须！', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  path: [{ required: true, message: '菜单地址必须！', trigger: 'blur' }],
  module: [{ required: true, message: '模块名必须！', trigger: 'blur' }],
  mark: [{ required: true, message: '标识必须！', trigger: 'blur' }]
}
const defaultItem = {
  title: '', // 名称
  pid: 0, // 父级id  顶级用0表示
  icon: '', // 图标
  component: '', // 组件名
  redirect: '', // 重定向地址
  is_cache: 1, // 是否缓存  1缓存，0不缓存
  is_show: 1, // 1显示，0隐藏
  is_link: 0, // 外链 1是  0否
  path: '', // 路由地址
  mark: '', // 权限标识
  sort: 10, // 排序
  type: 1 // 类型  1是目录，2是菜单
}
export default {
  name: 'vInfo',
  data () {
    return {
      isShow: false,
      isAdd: true,
      formData: {
        ...defaultItem
      },
      formRules
    }
  },
  computed: {
    title () {
      return this.isAdd ? '添加' : '修改'
    }
  },
  methods: {
    ...mapActions({
      getAllMenuList: 'menu/getAllMenuList',
      getUserInfo: 'user/getUserInfo'
    }),
    async getInfo (id) {
      this.formData = await getInfoData(id)
      this.isAdd = false
      this.isShow = true
    },
    async submit () {
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning(this.$t('base.verificationText'))
      }
      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success(this.$t('base.addSuccessText'))
      } else {
        await updateData(this.formData)
        this.$message.success(this.$t('base.editSuccessText'))
      }
      // 重新获取菜单
      this.getAllMenuList()
      // 重新拉取用户信息
      this.getUserInfo()
      this.cancel()
    },
    cancel () {
      this.isShow = false
      this.isAdd = true
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped></style>
